<template>
  <div v-if="count === 1" class="single-box">
    <div v-if="value && typeof value === 'string'" class="select-img-box" :style="{ width: size, height: size }">
      <n-image :src="value + '?imageView2/2/w/200'" :preview-src="value" object-fit="contain" style="margin: auto">
        <template #placeholder><n-empty description="加载失败" /></template>
      </n-image>
      <div class="del-box" @click="handleDel()">
        <n-icon class="icon-box" color="#ffffff"><DeleteOutlined /></n-icon>
      </div>
    </div>
    <div v-else class="plus-box" @click="showFileSelectModal = true" :style="{ width: size, height: size }">
      <n-icon class="icon-box" :size="24"><PlusOutlined /></n-icon>
    </div>
  </div>
  <div v-else class="multiple-box">
    <div
      v-for="(item, index) in value && value instanceof Array ? value : []"
      :key="index"
      class="select-img-box"
      :style="{ width: size, height: size }"
    >
      <n-image :src="item + '?imageView2/2/w/200'" :preview-src="item" object-fit="contain" style="margin: auto">
        <template #placeholder><n-empty description="加载失败" /></template>
      </n-image>
      <div class="del-box" @click="handleDel(index)">
        <n-icon class="icon-box" color="#ffffff"><DeleteOutlined /></n-icon>
      </div>
    </div>
    <div v-if="value.length < count" class="plus-box" @click="showFileSelectModal = true" :style="{ width: size, height: size }">
      <n-icon class="icon-box" :size="24"><PlusOutlined /></n-icon>
    </div>
  </div>
  <FileSelect v-model:show="showFileSelectModal" :file-tp-cd="fileTpCd" :select-count="count" @selected="handFileSelected" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { PropType } from 'vue';
import { PlusOutlined, DeleteOutlined } from '@vicons/antd';
import type { ComponentPropType } from '@yanfan/admin-layout/types';
import FileSelect from './Select.vue';

defineOptions({
  name: 'SelectImgWrap',
});

type IFileSelectOnSelectedParam = Parameters<ComponentPropType<typeof FileSelect, 'onSelected'>>[0];

const props = defineProps({
  value: {
    type: [String, Array] as PropType<string | string[]>,
    required: true,
    default: '',
  },
  fileTpCd: {
    type: String as PropType<string>,
    required: true,
    default: '',
  },
  count: {
    type: Number as PropType<number>,
    default: 1,
    validator: (value: number) => value > 0,
  },
  size: {
    type: String as PropType<string>,
    default: '100px',
  },
});

const emit = defineEmits<{
  (e: 'update:value', value: string | string[]): void;
}>();

const showFileSelectModal = ref<boolean>(false);

function handleDel(index?: number) {
  if (index === undefined && props.count === 1) {
    emit('update:value', '');
  } else if (typeof index === 'number') {
    const list = [...props.value];
    list.splice(index, 1);
    emit('update:value', list);
  }
}

function handFileSelected(data: IFileSelectOnSelectedParam) {
  if (props.count === 1) {
    emit('update:value', data.checkedFileUrlList[0]);
  } else if (props.count > 1) {
    emit('update:value', [...props.value, ...data.checkedFileUrlList]);
  }
}
</script>

<style lang="scss" scoped>
.multiple-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
.select-img-box {
  width: 100%;
  height: 100%;
  border: 1px dashed #dddddd;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  display: flex;
  .del-box {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: linear-gradient(223deg, #dc2626 50%, transparent 50%);
    cursor: pointer;
    .icon-box {
      position: absolute;
      top: 2px;
      right: 2px;
    }
  }
  &:hover {
    .del-box {
      display: block;
    }
  }
}
.plus-box {
  width: 100%;
  height: 100%;
  border: 1px dashed #dddddd;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  cursor: pointer;
  .icon-box {
    margin: auto;
    color: #cdcdcd;
    transition: transform 0.5s;
  }
  &:hover {
    .icon-box {
      transform: scale(2);
    }
  }
}
</style>
